<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>设置支付密码</title>
	<link rel="stylesheet" href="./css/format.css" />
	<link rel="stylesheet" href="./css/mint-min.css" />
	<link rel="stylesheet" href="./css/password.css" />
	<link rel="stylesheet" href="./component/component.css" />
</head>

<body>
	<div id="app">
		<div class="password-wrap">
			<h3 v-text="notice"></h3>
			<input ref="pwd" type="tel" maxlength="6" v-model="msg" class="pwd" unselectable="on" />
			<ul class="pwd-wrap" @click="focus">
				<li :class="msg.length == 0?'psd-blink':''"><i v-if="msg.length > 0"></i></li>
				<li :class="msg.length == 1?'psd-blink':''"><i v-if="msg.length > 1"></i></li>
				<li :class="msg.length == 2?'psd-blink':''"><i v-if="msg.length > 2"></i></li>
				<li :class="msg.length == 3?'psd-blink':''"><i v-if="msg.length > 3"></i></li>
				<li :class="msg.length == 4?'psd-blink':''"><i v-if="msg.length > 4"></i></li>
				<li :class="msg.length == 5?'psd-blink':''"><i v-if="msg.length > 5"></i></li>
			</ul>
			<p>支付密码可保障您的交易安全，请妥善保管您的交易密码。</p>
		</div>
		<div class="password-background-logowrapper">
            <background-logo src="./img/icon_banlogoblue.svg"></background-logo>
		</div>
	</div>
</body>
<script src="./util/vue.min.js"></script>
<script src="./util/rem.js"></script>
<script type="text/javascript" src="./util/mint-min.js"></script>
<script type="text/javascript" src="./util/util.js"></script>
<script src="./component/wide-red-button.js"></script>
<script src="./component/background-logo.js"></script>
<script src="./js/password.js"></script>

</html>